<template>
  <el-button type="primary" @click="add()">添加</el-button>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="饮料ID" prop="beverageID" />
    <el-table-column label="饮料名称" prop="beverageName" />
    <el-table-column label="饮料类型" prop="beverageType" />
    <el-table-column label="描述" prop="description" />
    <el-table-column label="价格" prop="price" />
    <el-table-column label="生产日期" prop="productionDate" />
    <el-table-column label="保质期" prop="shelfLife" />
    <el-table-column align="right">
      <template #header>
        <el-row :gutter="4">
          <el-col :span="16">
            <el-input v-model="search" placeholder="请输入饮料名称" />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="chax()">查询</el-button>
          </el-col>
        </el-row>
      </template>
      <template #default="scope">
        <el-button plain @click="bj(scope.row)">更新</el-button>
        <el-button plain @click="sc(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="zhonshul" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 模态框 -->
  <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="form">
      <el-form-item v-if="visible" label="编号" :label-width="formLabelWidth">
        <el-input v-model="form.beverageID" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饮料姓名" :label-width="formLabelWidth">
        <el-input v-model="form.beverageName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饮料类型" :label-width="formLabelWidth">
        <el-input v-model="form.beverageType" autocomplete="off" />
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>

      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="form.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生成日期" :label-width="formLabelWidth">
        <el-input v-model="form.productionDate" autocomplete="off" />
      </el-form-item>
      <el-form-item label="保质期" :label-width="formLabelWidth">
        <el-input v-model="form.shelfLife" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="tianjia()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
const zhonshul = ref(0);
// 当前页码
const currentPage = ref(1);
//当前页数量
const pageSize = ref(5);
//查询名称
const search = ref("");
const filterTableData = ref([]);
const dialogFormVisible = ref(false);
const beverageID = ref(0);
const form = ref({
  beverageName: "",
  beverageType: "",
  price: 0,
  description: "",
  beverageID: 0,
  productionDate: "2024-03-12",
  shelfLife: 80
});
const form1 = ref({
  beverageName: "",
  beverageType: "",
  price: 0,
  description: "",
  beverageID: 0,
  productionDate: "2024-03-12T02:44:30.950Z",
  shelfLife: 0
});
onMounted(() => {
  select();
});
//查询
function select() {
  axios({
    method: "get",
    url: "https://localhost:7052/api/BeverageInfo",
    params: {
      pageSize: pageSize.value,
      currentPage: currentPage.value,
      search: search.value,
    },
  }).then((res) => {
    zhonshul.value = res.data.totalCount;
    filterTableData.value = res.data.data;
  });
}
//查询按钮
function chax() {
  select();
}
//添加按钮
function add() {
  dialogFormVisible.value = true;
  form.value = form1.value;
  beverageID.value = 0;
}
//编辑按钮
function bj(row) {
  console.log(row);
  dialogFormVisible.value = true;
  form.value = row;
  beverageID.value = row.beverageID;
}
//删除按钮
function sc(row) {
  console.log(row.beverageID);
  axios({
    method: "delete",
    url: "https://localhost:7052/api/BeverageInfo",
    params: {
      BeverageID: row.beverageID,
    },
  }).then((res) => {
    if (res.status === 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      dialogFormVisible.value = false;
    } else {
      ElMessage({
        message: "删除失败",
        type: "waring",
      });
    }
    select();
  });
}
//添加编辑操作
function tianjia() {
  // 发起 POST 请求
  if (beverageID.value == "0") {
    console.log(form.value);
    console.log(beverageID.value);
    axios
      .post(
        `https://localhost:7052/api/BeverageInfo`, form.value)
      .then((response) => {
        // 请求成功处理
        if (response.status === 200) {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
          dialogFormVisible.value = false;
        } else {
          ElMessage({
            message: "添加失败",
            type: "waring",
          });
        }
        select();
      });
  } else {
    axios.put(`https://localhost:7052/api/BeverageInfo?BeverageID=${beverageID.value}`, form.value)
      .then((response) => {
        if (response.status === 200) {
          ElMessage({
            message: "更新成功",
            type: "success",
          });
          dialogFormVisible.value = false;
        } else {
          ElMessage({
            message: "更新失败",
            type: "waring",
          });
        }
        select();
      });
  }
}
function handleSizeChange() {
  select();
}
function handleCurrentChange() {
  select();
}
</script>
<style></style>